<template>
  <div class="container">
    <h1 id="title" class="el-icon-s-promotion"><span class="hidden-sm-and-down">个人简历</span></h1>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item class="el-icon-document" index="1"><span class="hidden-sm-and-down">{{ span.resumeManager }}</span></el-menu-item>
      <el-menu-item class="el-icon-chat-line-round" index="2"><span class="hidden-sm-and-down">{{ span.message }}</span></el-menu-item>
      <el-menu-item class="el-icon-user" index="3"><span class="hidden-sm-and-down">{{ span.account }}</span></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'seekers-header',
  data () {
    return {
      activeIndex: '1',
      span: { resumeManager: '简历管理', message: '消息中心', account: '账号管理' }
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
#title{
  float: left;
  color: #409EFF;
  padding-bottom: 50px;
}
.el-menu-demo{
  float: right;
}
</style>
